<template>
	<view class="fun-flex-col page">
		<!-- <view class="time">May,2024</text></view> -->
		<uni-nav-bar class="nav-bar" color="#000000" background-color="#F6F6F6"
			title="Transaction Record" left-icon="left" status-bar
			:fixed="true" :border="false" @clickRight='filter' @clickLeft='back'>
			<block slot="right">
				<view class="right">
					<text :class="queryData.changeType != 0 ? 'current' : ''">filter</text>
					<image src="@/static/common/filter.png" v-if='queryData.changeType == 0'></image>
					<image src="@/static/common/filter_on.png" v-else></image>
				</view>
			</block>
		</uni-nav-bar>
		
		<scroll-view  @scrolltolower="scrolltolower" scroll-y="true" enable-back-to-top="true" class="list-wrap" :style="{height: (windosHeight - 44) + 'px'}">
			<view class="list-item" v-for="item in dataList" :key="item.id">
				<view class="list">
					<view class="product">U.S. Growth Equity- Trend Arbitrage</view>
					<view class="status" :style="`background:${item.color}`">{{item.changeType | transacitionStatus}}</view>
				</view>
				
				<view class="list middle">
					<text>Date:{{UTILS.setDateFormat(item.changeTime)}}</text>
					<text>Available Balance:{{item.changeBalance}}</text>
				</view>
				
				<view class="list">
					<text>Order No. : {{item.changeInfoId}}</text>
					<text class="amount" :class="item.changeAmount < 0 ? 'fall-text':'rise-text'">{{removeMinusSign(item.changeAmount)}}</text>
				</view>
			</view>
		</scroll-view>
		<filter-modal v-show="isShowFilter" :filterData="filterList" @close='isShowFilter = false' @done="done"></filter-modal>
	</view>
</template>

<script>
	import {getTimeZone,removeMinusSign} from "@/common/js/func.js"
	import {changeTypeBgcolor} from "@/common/js/enum.js"
	import {changeList} from "@/api/more.js"
	import filterModal from "@/components/filterModal.vue"
	export default {
		data() {
			return {
				queryData:{
					page:1,
					limit:10,
					changeType:0,
					timeZone:8
				},
				dataList:[],
				total:0,
				windosHeight:"", //可使用窗口高度(不包含NavigationBar和TabBar的高度)
				removeMinusSign,
				isShowFilter:false,
				filterList:[
					{label:'Top Up',value:1},
					{label:'Withdrawal',value:2},
					{label:'Purchase',value:3},
					{label:'Settlement',value:4},
					{label:'Bonus',value:7},
					{label:'Purchase',value:8},
					{label:'Redemption',value:9},
					{label:'Dividend',value:10},
					{label:'Experience Funds',value:11}
				]
			};
		},
		onLoad() {
			this.queryData.timeZone = getTimeZone();
			this.getChangeList()
			uni.getSystemInfo({
				success: res => {
					this.windosHeight = res.windowHeight
				}
			})
		},
		
		methods: {
			getChangeList(){
				changeList(this.queryData).then(res => {
					if(res.code == 0){
						this.dataList = this.dataList?.concat(res?.data || []) || [];
						this.dataList.forEach(ele => {
							this.$set(ele,"color",changeTypeBgcolor[ele.changeType])
						})
						this.total = res.count;
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			// 触底加载更多
			scrolltolower(){
				if (this.total > this.dataList.length) {
					this.queryData.page++;
					this.getChangeList();
				}
			},
			back(){
				uni.switchTab({url:`/pages/more/index`})
			},
			filter(){
				this.isShowFilter = true
			},
			
			done(item){
				this.queryData.page = 1;
				this.dataList = [];
				this.queryData.changeType = item.value || 0;
				this.getChangeList()
			}
		},
		
		components:{
			filterModal
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.right{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			image{
				margin-left: 10rpx;
				width: 30rpx;
				height: 28rpx
			}
			.current{
				color: rgba(26, 123, 153, 1);
			}
		}
		.time {
			padding: 16rpx 0 16rpx 40rpx;
			background-color: #f7f7f7;
			font-size: 24rpx;
			font-weight: 500;
			color: #737580;
		}
		.list-wrap{
			padding: 0 32rpx;
			.list-item {
				padding:28rpx 0;
				border-bottom:2rpx solid rgba(176,177,191,0.14);
				.list{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						font-size: 24rpx;
						color: #999;
					}
					.product{
						font-size: 28rpx;
						line-height: 32rpx;
						flex:1;
						white-space: nowrap; /* 确保文本在一行内显示 */
						overflow: hidden; /* 超出容器部分隐藏 */
						text-overflow: ellipsis;
					}
					.status {
						padding: 6rpx;
						background-color: #ca5456;
						border-radius: 4rpx;
						font-size: 24rpx;
						color: #ffffff;
						
					}
					.amount{
						font-weight: bold;
						font-size: 28rpx;
						line-height: 32rpx;
					}
					.rise-text {
					    color: #51844D;
					}
					.fall-text {
					    color: #CA5456;
					}
				}
				.middle{
					margin: 24rpx 0;
				}
			}
		}
	}
</style>